<template>
    <div class="app-container">
        <!-- 顶部筛选区域 -->
        <div class="filter-section">
            <el-row :gutter="20">
                <el-col :span="4">
                    <el-cascader @change="updateSelectedTask" size="default" class="filter-item" placeholder="搜索任务"
                        :options="options1" filterable :props="{ value: 'value', label: 'label' }" />
                </el-col>
                <el-col :span="4">
                    <el-cascader @change="updateClass" size="default" class="filter-item" placeholder="选择班级"
                        :options="options2" filterable :props="{ value: 'value', label: 'label' }" />
                </el-col>
                <el-col :span="4">
                    <el-switch size="default" class="filter-item" v-model="isGroupTask" active-color="#13ce66"
                        inactive-color="#ff4949" active-text="小组任务" inactive-text="个人任务" />
                </el-col>
                <el-col :span="4">
                    <el-button size="default" class="filter-item" type="primary" @click="searchStudents">
                        搜索
                    </el-button>
                </el-col>
                <el-col :span="8">
                    <el-input size="default" class="filter-item-input" placeholder="搜索学生姓名/学号" v-model="searchInput"
                        clearable @keyup.enter="searchStudents" />
                </el-col>
            </el-row>
        </div>

        <!-- 任务详情区域 -->
        <div class="task-detail">
            <h3 class="red-text">当前任务: {{ selectedTask?.label || '请选择任务' }}</h3>
            <p>权重占比：{{ selectedTask?.weight || '' }}</p>
            <p class="red-text">完成截止时间：{{ selectedTask?.deadline || '' }}</p>
            <p>{{ selectedTask?.description || '请选择任务查看详情' }}</p>
        </div>

        <!-- 学生成绩表格区域 -->
        <div class="table-section">
            <el-table :data="currentPageData" style="width: 100%" :default-sort="{ prop: 'date', order: 'descending' }"
                :row-class-name="getRowClass" stripe border>
                <el-table-column prop="Id" label="学号" sortable />
                <el-table-column prop="name" label="学生姓名" sortable />
                <el-table-column prop="class" label="班级" sortable />

                <!-- 得分列 - 增强显示效果 -->
                <el-table-column prop="cord" label="得分" sortable>
                    <template #default="scope">
                        <div class="score-display">
                            <span :class="getScoreClass(scope.row.cord)">{{ scope.row.cord }}</span>
                            <el-tag :type="getTagType(scope.row.cord)" size="mini" class="ml-2">
                                {{ getGradeLabel(scope.row.cord) }}
                            </el-tag>
                        </div>
                    </template>
                </el-table-column>

                <!-- 评语列 - 带详情弹窗 -->
                <el-table-column prop="pinyu" label="评语" sortable>
                    <template #default="scope">
                        <el-popover placement="top" title="详细评语" width="360" trigger="hover">
                            <div class="popover-content">{{ scope.row.pinyu }}</div>
                            <template #reference>
                                <span class="ellipsis">{{ scope.row.pinyu }}</span>
                            </template>
                        </el-popover>
                    </template>
                </el-table-column>

                <el-table-column prop="respond" label="学生回答" sortable />

                <!-- 浏览状态列 - 带状态指示 -->
                <el-table-column prop="liulan" label="浏览状态" sortable>
                    <template #default="scope">
                        <el-tag :type="scope.row.liulan === '已浏览' ? 'success' : 'info'" effect="light">
                            {{ scope.row.liulan || '未浏览' }}
                        </el-tag>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页控件 -->
            <div class="pagination-container">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[5, 10, 20, 50]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="filteredTableData.length">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 任务数据
const options1 = ref([
    {
        value: 'chutiyan',
        label: 'Vue3开发初体验',
        weight: '7.5%',
        deadline: '2024/03/17 23:59:59',
        description: '参考官网教程，熟悉Vue3的各个知识点，使用Vue编写一个简单的todolist项目，并进行打包发布压缩上传。不能在线正常浏览网页效果者不得分！'
    },
    {
        value: 'zujianhuakaifa',
        label: 'Vue3组件化开发',
        weight: '10.0%',
        deadline: '2024/03/31 23:59:59',
        description: '熟练掌握Vue3的组件化开发方法，将上一任务的todolist项目进行组件化拆分，并进行打包发布压缩上传。不能在线正常浏览网页效果者不得分！'
    },
    {
        value: 'router',
        label: 'Vue3路由的使用',
        weight: '7.5%',
        deadline: '2024/04/07 23:59:59',
        description: '掌握vue-router的使用方法，定义多个页面组件。'
    },
    {
        value: 'film',
        label: '电影列表项目',
        weight: '7.5%',
        deadline: '2024/04/14 23:59:59',
        description: '复习 Vue 的基本语法，结合组件化开发知识，同时使用Vue路由，完成一个电影列表的项目开发。要求：功能完整，界面美观。请评分者使用浏览器的手机模式浏览评分。'
    },
    {
        value: 'test',
        label: 'Vue自动化测试',
        weight: '10.0%',
        deadline: '2024/03/31 23:59:59',
        description: '熟练掌握Vue3的组件化测试方法，编写单元测试用例并运行。'
    },
    {
        value: 'pinia',
        label: '状态管理Pinia',
        weight: '10.5%',
        deadline: '2024/04/22 23:59:59',
        description: '学习Vue3的状态管理Pinia的使用，完成用户登录的状态管理，同时将自动化测试截图放到页面组件里。'
    },
    {
        value: 'ui',
        label: '使用UI组件库',
        weight: '8.0%',
        deadline: '2024/04/28 23:59:59',
        description: '学习国内流行的Element Plus、Vant等组件库，完成页面美化。'
    }
]);

// 班级数据
const options2 = ref([
    {
        value: 'class1',
        label: '22软件技术3班',
    },
    {
        value: 'class3',
        label: '22软件技术1班',
    },
]);

// 学生数据 - 添加任务关联
const tableData = ref([
    {
        Id: '33333333',
        name: '测试学生3',
        class: '22软件技术3班',
        cord: '未评',
        pinyu: '未评',
        respond: '未作答',
        liulan: '',
        date: '2024-03-15',
        task: 'chutiyan'
    },
    {
        Id: '12345678',
        name: '刁建忠',
        class: '22软件技术1班',
        cord: '未评',
        pinyu: '未评',
        respond: '未作答',
        liulan: '',
        date: '2024-03-16',
        task: 'zujianhuakaifa'
    },
    {
        Id: '22000000',
        name: '周盛华',
        class: '22软件技术1班',
        cord: '未评',
        pinyu: '未评',
        respond: '访问链接',
        liulan: '浏览',
        date: '2024-03-17',
        task: 'router'
    },
    {
        Id: '22002370',
        name: '陈伍球',
        class: '22软件技术3班',
        cord: 45,
        pinyu: '抄袭,学号都没改,真就一比一还原呗',
        respond: '访问链接',
        liulan: '浏览',
        date: '2024-03-18',
        task: 'chutiyan'
    },
    {
        Id: '20005680',
        name: '赵新宇',
        class: '22软件技术3班',
        cord: 65,
        pinyu: '页面能正常访问，todolist可跨端浏览，功能完整，但样式缺乏美感，可进一步优化UI设计。',
        respond: '访问链接',
        liulan: '浏览',
        date: '2024-03-19',
        task: 'chutiyan'
    },
    {
        Id: '22002380',
        name: '李明亮',
        class: '22软件技术3班',
        cord: 78,
        pinyu: '完成了基本功能，代码结构清晰，但缺乏组件化拆分，可进一步优化代码组织。',
        respond: '访问链接',
        liulan: '浏览',
        date: '2024-03-20',
        task: 'zujianhuakaifa'
    },
    {
        Id: '22002390',
        name: '孙伟',
        class: '22软件技术1班',
        cord: 85,
        pinyu: '实现了完整功能，代码规范，组件化合理，页面美观，但自动化测试覆盖不足。',
        respond: '访问链接',
        liulan: '浏览',
        date: '2024-03-21',
        task: 'router'
    },
    {
        Id: '22002400',
        name: '周佳',
        class: '22软件技术1班',
        cord: 92,
        pinyu: '功能完整，代码质量高，组件化设计优秀，页面美观，自动化测试覆盖全面，非常出色！',
        respond: '访问链接',
        liulan: '浏览',
        date: '2024-03-22',
        task: 'film'
    },
    {
        Id: '22002400',
        name: '周佳',
        class: '22软件技术1班',
        cord: 92,
        pinyu: '功能完整，代码质量高，组件化设计优秀，页面美观，自动化测试覆盖全面，非常出色！',
        respond: '访问链接',
        liulan: '浏览',
        date: '2024-03-22',
        task: 'film'
    },
    {
        Id: '22002400',
        name: '周佳',
        class: '22软件技术1班',
        cord: 92,
        pinyu: '功能完整，代码质量高，组件化设计优秀，页面美观，自动化测试覆盖全面，非常出色！',
        respond: '访问链接',
        liulan: '浏览',
        date: '2024-03-22',
        task: 'film'
    },
    {
        Id: '22002400',
        name: '周佳',
        class: '22软件技术1班',
        cord: 92,
        pinyu: '功能完整，代码质量高，组件化设计优秀，页面美观，自动化测试覆盖全面，非常出色！',
        respond: '访问链接',
        liulan: '浏览',
        date: '2024-03-22',
        task: 'film'
    },
    {
        Id: '33333333',
        name: '测试学生3',
        class: '22软件技术3班',
        cord: '未评',
        pinyu: '未评',
        respond: '未作答',
        liulan: '',
        date: '2024-03-15',
        task: 'chutiyan'
    },
    {
        Id: '12345678',
        name: '刁建忠',
        class: '22软件技术1班',
        cord: '未评',
        pinyu: '未评',
        respond: '未作答',
        liulan: '',
        date: '2024-03-16',
        task: 'zujianhuakaifa'
    },
    {
        Id: '22000000',
        name: '周盛华',
        class: '22软件技术1班',
        cord: '未评',
        pinyu: '未评',
        respond: '访问链接',
        liulan: '浏览',
        date: '2024-03-17',
        task: 'router'
    },
    {
        Id: '22002370',
        name: '陈伍球',
        class: '22软件技术3班',
        cord: 45,
        pinyu: '抄袭,学号都没改,真就一比一还原呗',
        respond: '访问链接',
        liulan: '浏览',
        date: '2024-03-18',
        task: 'chutiyan'
    },
    {
        Id: '20005680',
        name: '赵新宇',
        class: '22软件技术3班',
        cord: 65,
        pinyu: '页面能正常访问，todolist可跨端浏览，功能完整，但样式缺乏美感，可进一步优化UI设计。',
        respond: '访问链接',
        liulan: '浏览',
        date: '2024-03-19',
        task: 'chutiyan'
    },
    {
        Id: '22002380',
        name: '李明亮',
        class: '22软件技术3班',
        cord: 78,
        pinyu: '完成了基本功能，代码结构清晰，但缺乏组件化拆分，可进一步优化代码组织。',
        respond: '访问链接',
        liulan: '浏览',
        date: '2024-03-20',
        task: 'zujianhuakaifa'
    },
    {
        Id: '22002390',
        name: '孙伟',
        class: '22软件技术1班',
        cord: 85,
        pinyu: '实现了完整功能，代码规范，组件化合理，页面美观，但自动化测试覆盖不足。',
        respond: '访问链接',
        liulan: '浏览',
        date: '2024-03-21',
        task: 'router'
    },
    {
        Id: '22002400',
        name: '周佳',
        class: '22软件技术1班',
        cord: 92,
        pinyu: '功能完整，代码质量高，组件化设计优秀，页面美观，自动化测试覆盖全面，非常出色！',
        respond: '访问链接',
        liulan: '浏览',
        date: '2024-03-22',
        task: 'film'
    },
    {
        Id: '22002400',
        name: '周佳',
        class: '22软件技术1班',
        cord: 92,
        pinyu: '功能完整，代码质量高，组件化设计优秀，页面美观，自动化测试覆盖全面，非常出色！',
        respond: '访问链接',
        liulan: '浏览',
        date: '2024-03-22',
        task: 'film'
    },
    {
        Id: '22002400',
        name: '周佳',
        class: '22软件技术1班',
        cord: 92,
        pinyu: '功能完整，代码质量高，组件化设计优秀，页面美观，自动化测试覆盖全面，非常出色！',
        respond: '访问链接',
        liulan: '浏览',
        date: '2024-03-22',
        task: 'film'
    },
    {
        Id: '22002400',
        name: '周佳',
        class: '22软件技术1班',
        cord: 92,
        pinyu: '功能完整，代码质量高，组件化设计优秀，页面美观，自动化测试覆盖全面，非常出色！',
        respond: '访问链接',
        liulan: '浏览',
        date: '2024-03-22',
        task: 'film'
    },
]);

// 分页相关数据
const currentPage = ref(1);
const pageSize = ref(10);

// 响应式数据
const selectedTask = ref(null);
const selectedClass = ref(null);
const isGroupTask = ref(false);
const searchInput = ref('');

// 更新选中的任务
const updateSelectedTask = (value) => {
    if (value && value.length > 0) {
        const task = options1.value.find(option => option.value === value[0]);
        selectedTask.value = task;
    } else {
        selectedTask.value = null;
    }
};

// 更新选中的班级
const updateClass = (value) => {
    if (value && value.length > 0) {
        const classItem = options2.value.find(option => option.value === value[0]);
        selectedClass.value = classItem;
    } else {
        selectedClass.value = null;
    }
};

// 搜索学生
const searchStudents = () => {
    console.log('搜索条件:', {
        task: selectedTask?.value?.label,
        class: selectedClass?.value?.label,
        search: searchInput.value
    });
    // 重置到第一页
    currentPage.value = 1;
};

// 计算过滤后的表格数据
const filteredTableData = computed(() => {
    let result = [...tableData.value];

    // 按班级过滤
    if (selectedClass.value) {
        result = result.filter(item => item.class === selectedClass.value.label);
    }

    // 按搜索词过滤
    if (searchInput.value) {
        const keyword = searchInput.value.toLowerCase();
        result = result.filter(item =>
            item.Id.toLowerCase().includes(keyword) ||
            item.name.toLowerCase().includes(keyword)
        );
    }

    // 按小组/个人任务过滤
    if (isGroupTask.value) {
        // 示例：假设班级中包含"3班"的为小组任务
        result = result.filter(item => item.class.includes('3班'));
    }

    return result;
});

// 当前页数据
const currentPageData = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return filteredTableData.value.slice(start, end);
});

// 处理每页数量变化
const handleSizeChange = (newSize) => {
    pageSize.value = newSize;
    // 重置到第一页
    currentPage.value = 1;
};

// 处理页码变化
const handleCurrentChange = (newPage) => {
    currentPage.value = newPage;
};

// 获取行样式
const getRowClass = ({ row }) => {
    const score = Number(row.cord);
    if (isNaN(score)) return '';
    if (score >= 85) return 'high-score-row';
    if (score >= 60) return 'medium-score-row';
    return 'low-score-row';
};

// 获取得分样式
const getScoreClass = (score) => {
    const numScore = Number(score);
    if (isNaN(numScore)) return 'text-gray-500';
    if (numScore >= 85) return 'text-green-600 font-bold';
    if (numScore >= 60) return 'text-blue-600';
    return 'text-red-600 font-bold';
};

// 获取标签类型
const getTagType = (score) => {
    const numScore = Number(score);
    if (isNaN(numScore)) return 'info';
    if (numScore >= 85) return 'success';
    if (numScore >= 60) return 'primary';
    return 'danger';
};

// 获取等级标签
const getGradeLabel = (score) => {
    const numScore = Number(score);
    if (isNaN(numScore)) return '未评';
    if (numScore >= 85) return '优秀';
    if (numScore >= 70) return '良好';
    if (numScore >= 60) return '合格';
    return '不合格';
};
</script>

<style scoped>
.app-container {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    width: 80%;
    max-height: calc(100vh - 80px);
    /* 视口高度减去顶部空间和边距 */
    overflow-y: auto;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.filter-section {
    margin-bottom: 20px;
    background-color: #f5f7fa;
    padding: 15px;
    border-radius: 4px;
}

.filter-item {
    margin-bottom: 10px;
}

.filter-item-input {
    width: 100%;
}

.task-detail {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    background-color: #fff;
}

.red-text {
    color: #f56c6c;
    font-weight: bold;
}

.table-section {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.score-display {
    display: flex;
    align-items: center;
}

.ellipsis {
    display: inline-block;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.popover-content {
    white-space: pre-wrap;
}

.high-score-row {
    background-color: rgba(59, 130, 246, 0.05) !important;
}

.medium-score-row {
    background-color: rgba(72, 187, 120, 0.05) !important;
}

.low-score-row {
    background-color: rgba(239, 68, 68, 0.05) !important;
}

.ml-2 {
    margin-left: 0.5rem;
}

.pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
</style>